import Compatibility from "../_compatibility.mdx";
import Usage from "../_usage.mdx";

# Background Color

<Compatibility
  supported={["bg-{n}", "bg-[n]"]}
  none={["bg-inherit", "bg-current"]}
/>

:::note backgrondOpacity (native only)

For performance reasons, NativeWind renders with the `corePlugin` `backgroundOpacity` disabled. This plugin allows text to dynamically change it's opacity via the `--tw-background-opacity` variable. Instead, the opacity is set as a static value in the `color` property.

If you need to use this feature, you can enable it by adding the following to your `tailwind.config.js` file:

```js title=tailwind.config.js
module.exports = {
  /* ...  */
  corePlugin: {
    backgroundOpacity: true,
  },
};
```

:::
